﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!-- 样式 -->
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />

<style>
    .panel-title { font-size:18px; font-weight:600; color:#333; }
    .kv-row { display:flex; padding:8px 0; border-bottom:1px dashed #eee; }
    .kv-row:last-child { border-bottom:none; }
    .kv-label { width:120px; color:#666; text-align:right; padding-right:8px; }
    .kv-value { flex:1; color:#222; }
    .section { background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.04); padding:12px 16px; }
    .mt16 { margin-top:16px; }
    .tag { padding:2px 8px; border-radius:10px; font-size:12px; }
    .tag-green { background:#e8f7ee; color:#16b777; }
    .tag-gray { background:#f2f3f5; color:#909399; }
</style>

<div class="layui-card" style="margin:16px;">
    <div class="layui-card-header">
        <i class="layui-icon layui-icon-template-1"></i> 工艺流程详情
    </div>
    <div class="layui-card-body">
        <div class="layui-tab" lay-filter="detailTab">
            <ul class="layui-tab-title">
                <li class="layui-this">工艺流程信息</li>
                <li>操作记录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <!-- 基础信息 -->
                    <div class="section">
                        <div class="panel-title">
                            基础信息
                        </div>
                        <div class="layui-row layui-col-space16 mt16">
                            <div class="layui-col-md6">
                                <div class="kv-row"><div class="kv-label">工艺流程编号：</div><div class="kv-value" id="flowCode"></div></div>
                                <div class="kv-row"><div class="kv-label">负责人：</div><div class="kv-value" id="responsible"></div></div>
                                <div class="kv-row"><div class="kv-label">状态：</div><div class="kv-value" id="status"></div></div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="kv-row"><div class="kv-label">工艺流程名称：</div><div class="kv-value" id="flowName"></div></div>
                                <div class="kv-row"><div class="kv-label">所属部门：</div><div class="kv-value" id="department"></div></div>
                            </div>
                            <div class="layui-col-md12">
                                <div class="kv-row"><div class="kv-label">备注：</div><div class="kv-value" id="remark"></div></div>
                            </div>
                        </div>
                    </div>

                    <!-- 加工工序列表 -->
                    <div class="section mt16">
                        <div class="panel-title">加工工序</div>
                        <div class="mt16">
                            <table id="processTable" lay-filter="processTable"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div style="padding: 24px; color:#666;">暂无操作记录</div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="flowId" />
    <div style="height:4px;"></div>
    <div class="layui-card-footer" style="text-align:right;padding:12px 16px;">
        <button type="button" class="layui-btn layui-btn-primary" id="btnBack">返回</button>
    </div>
    <div style="height:8px;"></div>
 </div>

<script src="~/js/site.js"></script>
<script src="~/layui/layui.js"></script>
<script>
    layui.use(['table', 'element'], function () {
        var table = layui.table;
        var element = layui.element;
        var layer = layui.layer;

        // 解析 Id：兼容大小写与多种键名（id/Id/flowId/processFlowId）
        var id = getQuery('id') || getQuery('Id') || getQuery('flowId') || getQuery('FlowId')
            || localStorage['processFlowId'] || localStorage['flowId'];
        if (!id) {
            layer.msg('未获取到流程 Id', { icon: 2 });
            return;
        }
        document.getElementById('flowId').value = id;

        // 初始化表格（先占位列）
        table.render({
            elem: '#processTable',
            height: 360,
            page: false,
            cols: [[
                { type: 'numbers', title: '序号', width: 60 },
                { field: 'sort', title: '加工工序', width: 100, align: 'center' },
                { field: 'process.processCode', title: '工序编码', width: 140, templet: d => d.process?.processCode || '' },
                { field: 'process.processName', title: '工序名称', minWidth: 180, templet: d => d.process?.processName || '' },
                { field: 'process.responsible', title: '负责人', width: 120, align: 'center', templet: d => d.process?.responsible || '' },
                { field: 'process.department', title: '所属部门', width: 120, align: 'center', templet: d => d.process?.department || '' },
                { field: 'remark', title: '备注', minWidth: 180 }
            ]],
            data: []
        });

        // 拉取详情
        loadDetail(id);

        function loadDetail(id) {
            $.ajax({
                url: 'http://localhost:5141/api/ProcessFlow/DetailProcessFlow',
                type: 'GET',
                data: { id: id },
                success: function (res) {
                    if (res && res.code === 200 && res.data) {
                        fillBase(res.data);
                        var rows = Array.isArray(res.data.flowProcessRelations) ? res.data.flowProcessRelations : [];
                        // 排序保障
                        rows.sort(function (a, b) { return (a.sort || 0) - (b.sort || 0); });
                        table.reload('processTable', { data: rows });
                    } else {
                        layer.msg(res && res.message ? res.message : '加载失败', { icon: 2 });
                    }
                },
                error: function () { layer.msg('网络错误，加载失败', { icon: 2 }); }
            });
        }

        function fillBase(flow) {
            $('#flowCode').text(flow.flowCode || '');
            $('#flowName').text(flow.flowName || '');
            $('#responsible').text(flow.responsible || '');
            $('#department').text(flow.department || '');
            var statusHtml = (flow.status === 1 || flow.status === true)
                ? '<span class="tag tag-green">启用</span>'
                : '<span class="tag tag-gray">禁用</span>';
            $('#status').html(statusHtml);
            $('#remark').text(flow.remark || '');
        }

        function getQuery(key) {
            var m = new RegExp('(?:\\?|&)' + key + '=([^&]*)').exec(location.search);
            return m ? decodeURIComponent(m[1]) : '';
        }

        // 返回
        $('#btnBack').on('click', function () {
            if (window.parent && window.parent.loadPage) {
                window.parent.loadPage('/Process/ProcessFlowList', '工艺流程列表');
            } else {
                history.back();
            }
        });
    });
</script>
